<template>
  <Layout title="创建备忘" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
      "
    >
      <view
        style="margin-top: 20rpx; margin-bottom: 20rpx; flex: 1; min-height: 0"
      >
        <Scroll>
          <u-form
            ref="form"
            :model="formData"
            :labelStyle="{ fontSize: '40rpx' }"
          >
            <u-form-item label="提醒日期" label-width="180rpx">
              <view>
                <view style="display: flex; column-gap: 20rpx">
                  <view style="width: 100%">
                    <u-button type="info" @click="datetimeSelect"
                      ><text style="font-size: 40rpx"
                        >日期选择: {{ formData.sendDatetime }}</text
                      ></u-button
                    >
                  </view>
                </view>
                <u-calendar
                  :show="calendar.show"
                  mode="single"
                  @confirm="calendarConfirm"
                  @close="calendarClose"
                  :show-confirm="true"
                  :maxDate="maxDate"
                  :minDate="minDate"
                  :defaultDate="defaultDate"
                  :monthNum="24"
                  :allowSameDay="true"
                ></u-calendar>
              </view>
            </u-form-item>
            <view class="top">
              <u-form-item
                label="提醒内容"
                label-position="top"
                label-width="180rpx"
                prop="content"
              >
                <u-textarea
                  v-model="formData.content"
                  height="700rpx"
                  :maxlength="-1"
                ></u-textarea>
              </u-form-item>
            </view>
          </u-form>
        </Scroll>
      </view>
      <view>
        <u-button type="success" @click="create">
          <text style="font-size: 40rpx">确定</text>
        </u-button>
      </view>
    </view>
  </Layout>
</template>
<script>
import Layout from "@/pages/component/layout/index.vue";
import Scroll from "@/pages/component/scroll/index.vue";
import { getCurrentDatetime } from "@/api/datetime";
import dayjs from "dayjs";
import { getUserByAll } from "@/api/user";
import {
  showErrorToast,
  showCreateOkToast,
  showCreateErrorToast,
} from "@/util/message";
import { createNote } from "@/api/note";
export default {
  components: { Layout, Scroll },
  onLoad() {
    this.setRules();
    getUserByAll()
      .then((result) => {
        let allUser = result.data.list;
        let owner = allUser.find((user) => {
          return user.name === this.$store.state.name;
        });
        this.formData.userUuid = owner.uuid;
        getCurrentDatetime().then((currentDatetime) => {
          let nowDatetime = dayjs(currentDatetime.data.datetime);
          this.minDate = nowDatetime.subtract(1, "year").format("YYYY-MM-DD");
          this.maxDate = nowDatetime.add(1, "year").format("YYYY-MM-DD");
          this.defaultDate = nowDatetime.format("YYYY-MM-DD");
          this.formData.sendDatetime = nowDatetime.format("YYYY-MM-DD");
        });
      })
      .catch((error) => {
        showErrorToast(error);
      });
  },
  methods: {
    setRules() {
      this.$refs.form.setRules({
        content: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                return callback(new Error("必填项"));
              }
              if (value.startsWith(" ") || value.endsWith(" ")) {
                return callback(new Error("首尾不能存在不可见字符"));
              }
              return callback();
            },
          },
        ],
      });
    },
    calendarClose() {
      this.calendar.show = false;
    },
    calendarConfirm(event) {
      this.formData.sendDatetime = event[0];
      this.calendarClose();
    },
    datetimeSelect() {
      this.calendar.show = true;
    },
    async create() {
      try {
        try {
          await this.$refs.form.validate();
        } catch (error) {
          throw new Error("未填写必填项");
        }
        await createNote(this.formData);
        await uni.navigateBack();
        showCreateOkToast();
      } catch (error) {
        showErrorToast(error);
      }
    },
  },
  data() {
    return {
      calendar: {
        show: false,
      },
      formData: {
        userUuid: "",
        sendDatetime: "",
        content: "",
      },
      maxDate: "",
      minDate: "",
      defaultDate: "",
    };
  },
};
</script>
